<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>CSS filters examples</title>
    <style>
    html {
      font-family: sans-serif;
    }

    figure {
      transition: 1s all;
      display: inline-block;
      position: relative;
    }

    figcaption {
      position: absolute;
      left: 0;
      bottom: 50px;
      text-shadow: 1px 1px 1px white,
                   2px 2px 1px white;
      font-size: 1.3rem;
      letter-spacing: 2px
    }

    .blur:hover {
      -webkit-filter: blur(5px);
      filter: blur(5px);
    }

    .brightness:hover {
      -webkit-filter: brightness(0.6);
      filter: brightness(0.6);
    }

    .shadow:hover {
      -webkit-filter: drop-shadow(10px 10px 5px rgba(0,0,0,0.7));
      filter: drop-shadow(10px 10px 5px rgba(0,0,0,0.7));
    }

    .gray:hover {
      -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
    }

    .sepia:hover {
      -webkit-filter: sepia(100%);
      filter: sepia(100%);
    }

    .invert:hover {
      -webkit-filter: invert(100%);
      filter: invert(100%);
    }

    .saturate:hover {
      -webkit-filter: saturate(300%);
      filter: saturate(300%);
    }

    .opacity:hover {
      -webkit-filter: opacity(0%);
      filter: opacity(0%);
    }

    .hue-rotate:hover {
      -webkit-filter: hue-rotate(210deg);
      filter: hue-rotate(210deg);
    }

    </style>
  </head>
  <body>
    <figure class="blur">
      <img src="colorful-heart.png" alt="a colorful prism heart">
      <figcaption>Blur filter</figcaption>
    </figure>

    <figure class="brightness">
      <img src="colorful-heart.png" alt="a colorful prism heart">
      <figcaption>Brightness filter</figcaption>
    </figure>

    <figure class="shadow">
      <img src="colorful-heart.png" alt="a colorful prism heart">
      <figcaption>Drop shadow filter</figcaption>
    </figure>

    <figure class="gray">
      <img src="colorful-heart.png" alt="a colorful prism heart">
      <figcaption>Grayscale filter</figcaption>
    </figure>

    <figure class="sepia">
      <img src="colorful-heart.png" alt="a colorful prism heart">
      <figcaption>Sepia filter</figcaption>
    </figure>

    <figure class="invert">
      <img src="colorful-heart.png" alt="a colorful prism heart">
      <figcaption>Inversion filter</figcaption>
    </figure>

    <figure class="saturate">
      <img src="colorful-heart.png" alt="a colorful prism heart">
      <figcaption>Saturation filter</figcaption>
    </figure>

    <figure class="opacity">
      <img src="colorful-heart.png" alt="a colorful prism heart">
      <figcaption>Opacity filter</figcaption>
    </figure>

    <figure class="hue-rotate">
      <img src="colorful-heart.png" alt="a colorful prism heart">
      <figcaption>Hue rotation filter</figcaption>
    </figure>
    
  </body>
</html>